@import url('_funs.less');

.big-title {
  font-size: 24px;
  text-align: center;
  font-weight: 800;
}

.small-title {
  font-size: 20px;
  text-align: center;
  color: #999;
}

.step {
  overflow: hidden;

  ul {
    li {
      width: 32.2%;
      float: left;
      margin-right: 20px;

      &:last-child {
        margin-right: 0px;
      }
    }
  }
}

.step-bg {
  background: #9cb1ff;
  padding: 30px;
  overflow: hidden;
}

.step-img {
  width: 20%;
  float: left;

  img {
    width: 100%;
  }
}

.step-title {
  width: 80%;
  float: left;

  h3 {
    margin: 10px 0 5px 10px;
    color: #fff;
  }
}

.step-list {
  margin: 0 0 0 10px;
  color: #fff;
}

.step-bg2 {
  background: #ffdd4f;
  padding: 30px;
  overflow: hidden;
}

.step-bg3 {
  background: #80c269;
  padding: 30px;
  overflow: hidden;
}

.step-half {
  background: #f6f6f6;
  padding: 60px 10px;
  overflow: hidden;
}

.step-icon {
  li {
    width: 20% !important;
    margin-right: 0 !important;
    float: left;
    text-align: center;
  }
}

.step-second {
  li {
    width: 25% !important;
    margin-right: 0 !important;
    float: left;
    text-align: center;
    margin-bottom: 10px;

    &:nth-child(-n + 4) {
      margin: 10px 0 20px 0;
    }
  }
}

.step-have {
  padding: 5px;
}

.step-wet {
  li {
    width: 33.333% !important;
    margin-right: 0 !important;
    float: left;
    text-align: center;
  }
}

.step-banner {
  clear: both;
  margin: 20px 0;

  img {
    width: 100%;
  }
}

.pull-box {
  overflow: hidden;
  padding-bottom: 20px;
}

.pull-lf {
  width: 800px;
  float: left;
}

.title {
  font-weight: bold;
  font-size: 0;
  line-height: 30px;
  float: left;

  span {
    font-size: 18px;
    color: #333333;
  }
}

.more {
  float: right;
  line-height: 30px;

  .link {
    color: #666;

    &:hover {
      color: #333;
    }
  }
}

.step-bar {
  overflow: hidden;
}

.clear {
  clear: both;
}

.step-photo {
  width: 60%;
  float: left;

  img {
    width: 100%;
  }
}

.step-content {
  width: 40%;
  padding: 10px;
  float: left;

  h4 {
    text-align: center;
  }
}

.step-text {
  margin-left: 15px;
  line-height: 25px;
  color: #a9a9a9;
}

.step-num {
  overflow: hidden;

  ul {
    li {
      float: left;
      margin-right: 15px;

      &:nth-child(1) {
        margin-left: 15px;
      }

      a {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        display: block;
        border-radius: 100px;
        background: #333333;
        color: #8e8e8e;
      }

      .on {
        color: #fff;
      }
    }
  }
}

.step-entry {
  padding: 20px 0;
  overflow: hidden;
  border-bottom: 1px solid #f1f1f1;
}

.step-entry-img {
  width: 25%;
  float: left;
}

.step-introduce {
  width: 72%;
  float: left;
  margin-left: 20px;

  h4 {
    font-size: 20px;
  }
}

.step-txt {
  font-size: 14px;
  color: #999;
}

.companyName {
  color: #999;
  margin-right: 20px;
}

.date {
  color: #999;
}

.pull-rl {
  width: 300px;
  float: right;

  .b {
    border: 1px solid #e1e1e1;
    padding: 15px;

    &>img {
      display: block;
      width: 100%;
    }

    ul {
      li {
        overflow: hidden;
        margin-top: 17px;

        .img {
          float: left;
          width: 99px;
          height: 66px;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .desc {
          float: right;
          width: 160px;
          margin-top: -2px;

          div {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            max-height: 38px;
            line-height: 19px;
          }

          a {
            height: 22px;
            line-height: 22px;
            font-size: 12px;
            color: #fff;
            background: #0bb569;
            padding: 0 15px;
            margin-top: 10px;
            display: inline-block;

            &:hover {
              background: #1a8e5a;
            }
          }
        }
      }

      .step-margin {
        .img {
          float: left;
          width: 100px;
          height: 80px;
        }
      }
    }
  }
}

// .t {
//   overflow: hidden;
//   font-size: 17px;
//   padding: 5px 0 7px;
//   a {
//     float: right;
//     font-size: 12px;
//     line-height: 20px;
//     margin-top: 3px;
//     color: #666;
//   }
// }
.renovation-home {
  padding: 15px 0 0 0;

  img {
    width: 100%;
  }
}

.title-top {
  margin-top: 10px;
}

.step-margin {
  margin-top: 0 !important;
  margin-bottom: 15px;

  &:last-child {
    margin-bottom: 0;
  }
}

.listed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: normal;
  margin-bottom: 0;
}

.desc-left {
  width: 155px !important;
  margin-left: 10px;
  margin-top: 0 !important;

  h5 {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

.date-list {
  margin-bottom: 0;
}